<template>
	<view class="container">
		<view class="form">
			<view class="row has_lb">
				<view class="lb">
					<text>支付宝账号</text>
				</view>
				
				<input class="input" type="text" v-model="accout" placeholder="请填写支付宝账号"/>
			</view>
			
			<view class="row has_lb">
				<view class="lb">
					<text>真实姓名</text>
				</view>
				
				<input class="input" type="text" v-model="truename" placeholder="请填写真实姓名"/>
			</view>
			
			<view class="row has_lb">
				<view class="lb">
					<text>手机号码</text>
				</view>
				
				<view class="go">{{userInfo.name}}</view>
			</view>
			
			<view class="row has_lb bd0">
				<view class="lb">
					<text>验证码</text>
				</view>
				
				<input class="input w60" type="text" v-model="vcode" placeholder="请输入短信验证码"/>
				
				<button type="primary" class="btn" @click="onGetCodeClick">{{vcodemsg}}</button>
			</view>
		</view>
		
		<view class="footer">
			<view class="btn" @click="onSaveClick">
				<text>保存</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { 
		runUserAlipayInfo,
		runGetSmsCode
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				accout: '',
				truename: '',
				vcode: '',
				vcodemsg: '获取验证码',
				isSendCode: false
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onLoad(options) {
			let _t = this
			
			runUserAlipayInfo({
				params:{
					uid: this.userInfo.id,
				},
				success: res => {
					_t.accout = res.data.alipay
					_t.truename = res.data.real_name
				}
			})
		},
		
		onUnload() {
			this.codeTimer && clearInterval(this.codeTimer)
		},
		
		methods:{
			onGetCodeClick () {
				let _t = this
				
				if(this.isSendCode)return false;
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				this.isSendCode = true
				
				runGetSmsCode({
					params: {
						mobile: this.userInfo.name
					},
					success: res => {
						uni.hideLoading()
						
						uni.showToast({
							icon: "none",
							title: "发送成功"
						})
						
						let sp = 120
						_t.vcodemsg = sp + 'S'
						_t.codeTimer && clearInterval(_t.codeTimer)
						
						_t.codeTimer = setInterval(() => {
							sp--;
							if(sp <= 0){
							  _t.vcodemsg = "获取验证码"
							  _t.isSendCode = false
							  clearInterval(_t.codeTimer)
							}else{
							  _t.vcodemsg = sp + 'S'
							}
			  
						 }, 1000)
					},
					fail: res => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					},
					error: () => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "系统繁忙，请稍候再试"
						})
					}
				})
			},
			
			onSaveClick () {
				let _t = this
				
				if(_.isEmpty(this.vcode))return false;
				if(_.isEmpty(this.accout))return false;
				if(_.isEmpty(this.truename))return false;
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				let data = {
					uid: this.userInfo.id,
					mobile: this.userInfo.name,
					alipay: this.accout,
					real_name: this.truename,
					code: this.vcode
				}
				
				runUserAlipayInfo({
					method: "POST",
					params: data,
					success: res => {
						uni.hideLoading()
						
						uni.showToast({
							icon: "none",
							title: "操作成功"
						})
						
						WxNotificationCenter.postNotificationName("event_refresh_user_alipay", {
                            accout: _t.accout,
                            truename: _t.truename,
                        })
						
						setTimeout(() => {
							uni.navigateBack({
								
							})
						}, 300)
					},
					fail: res => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: res.msg
						})
					},
					error: () => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "系统繁忙，请稍候再试"
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container{
		padding-bottom: 120px;
	}
	
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		height: 100px;
		background: #FFFFFF;
		z-index: 10;
		box-shadow: 0px -4px 16px 0px rgba(122,142,216,0.27);
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		
		.btn{
			width: 100%;
			height: 100%;
			background: linear-gradient(90deg,rgba(232,39,32,1) 0%,rgba(255,77,123,1) 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			
			text{
				font-size: 32px;
				color: #FFFFFF;
			}
		}
	}
	
	.form{
		width: 690px;
		margin: 0 auto;
		
		.row{
			border-bottom: 1px solid #f5f5f5;
			position: relative;
			
			&.has_lb{
				padding-top: 40px;
			}
			
			&.bd0{
				border-bottom-width: 0;
			}
			
			&.flex{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.lb{
				height: 40px;
				position: absolute;
				left: 0;
				top: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
				
				text{
					font-size: 24px;
					color: #999999;
				}
				
				.b{
					color: #FF2D5E;
				}
			}
			
			.input{
				width: 100%;
				height: 100px;
				font-size: 30px;
				color: #333333;
				
				&.w60{
					width: 60%;
				}
			}
			
			.next{
				position: absolute;
				right: 0;
				top: 32px;
				width: 36px;
				height: 36px;
			}
			
			.go{
				line-height: 100px;
				width: 100%;
				height: 100px;
				font-size: 30px;
				color: #333333;
			}
			
			.btn{
				height: 100px;
				position: absolute;
				right: 0;
				bottom: 0;
				line-height: 100px;
				background: #FFFFFF;
				font-size: 28px;
				color: #FF2D5E;
			}
		}
	}
	
</style>
